var UI = {
  setCanvasSize: function() {
    var mapData = Resource.get('mapData');
    var ratio = mapData.width / mapData.height;
    var canvasHeight = window.innerHeight;

    var canvasConfig = Config.canvas;
    var minHeight = canvasConfig.minHeight;
    var maxHeight = canvasConfig.maxHeight;
    var minWidth = canvasConfig.minWidth;
    var maxWidth = canvasConfig.maxWidth;

    if (canvasHeight > maxHeight)
      canvasHeight = maxHeight;
    else if (canvasHeight < minHeight)
      canvasHeight = minHeight;
    var canvasWidth = ratio * canvasHeight;
    if (canvasWidth > maxWidth)
      canvasWidth = maxWidth;
    else if (canvasWidth < minWidth)
      canvasWidth = minWidth;

    Chess.canvas.height = canvasHeight;
    Chess.canvas.width = canvasWidth;
  },
  
  handleWindowResize: function() {
    var players = Chess.players;
    UI.setCanvasSize();
    Chess.preProcessMapData();
    for (var name in players) {
      var player = players[name];
      player.jump(player.currentPointIndex);
      player.setSize();
    }
  },
  
  showWaitingZone: function() {
    $('#wait-zone').show();
    $.setDialogPosition($('#wait-zone').get());
    this.showOverlay();
  },

  hideWaitingZone: function() {
    $('#wait-zone').hide();
    this.hideOverlay();
  },

  resetWaitingZone: function() {
    $('#playerA').html('Player A');
    $('#playerB').html('Player B');
    $('#playerA').removeClass('player-ready');
    $('#playerB').removeClass('player-ready');
  },

  resetPlayerReadyStatus: function(who) {
    $('#player' + who).html('Player ' + who);
    $('#player' + who).removeClass('player-ready');
  },

  setPlayerReady: function(who) {
    var message = Message.get('playerReady', who);
    $('#player' + who).html(message);
    $('#player' + who).addClass('player-ready');
  },

  generateQrCodeForUrl: function(url, image) {
    var width = 150;
    var height = 150;
    image.src = 'http://chart.apis.google.com/chart?chs=' + width +
      'x' + height +
      '&cht=qr&chld=L%7C1&choe=UTF-8&chl=BEGIN%3AVCARD%0AVERSION%3A3.0%0AURL%3A' +
      url + '%0AEND%3AVCARD';
  },
  
  setClientUrl: function(url) {
    $('#client-url').html(url);
  },
  
  showGameZone: function() {
    $('#game-zone').show();
  },

  hideGameZone: function() {
    $('#game-zone').hide();
  },

  showOverlay: function() {
    $('#overlay').css({
      width: document.body.scrollWidth + 'px',
      height: document.body.scrollHeight + 'px'
    }).show();
  },

  hideOverlay: function() {
    $('#overlay').hide();
  },

  showCanvas: function() {
    $('#canvas').show();
  },

  hideCanvas: function() {
    $('#canvas').hide();
  },

  showStaticMap: function() {
    var dataUrl = Chess.canvas.toDataURL();
    var $staticMap = $('#static-map');
    $staticMap.css({
      width: Chess.canvas.width + 'px',
      height: Chess.canvas.height + 'px'
    });
    $staticMap.on('load', function() {
      UI.hideCanvas();
      $staticMap.show();
    });
    $staticMap.attr('src', dataUrl);
  },

  hideStaticMap: function() {
    $('#static-map').hide();
  },

  showLastBattleResult: function(winner) {
    var msg = Message.get('lastBattleWinner', winner);
    $('#last-battle-result').show().html(msg);
  },

  hideLashBattleResult: function() {
    $('#last-battle-result').hide();
  }
};